<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="logo">
          <h1>天气预报</h1>
        </div>
        <div class="nav-right">
          <router-link to="/warnings" class="nav-link">预警管理</router-link>
          <router-link to="/icons" class="nav-link">天气图标</router-link>
          <template v-if="userStore.isAuthenticated">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="user-profile">
                {{ userStore.username }} <i class="el-icon-arrow-down"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="favorites">我的收藏</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <router-link to="/login" class="nav-link">登录</router-link>
            <router-link to="/register" class="nav-link">注册</router-link>
          </template>
        </div>
      </div>
    </header>
    
    <!-- 主要内容 -->
    <main class="main-content">
      <div class="page-container">
        <!-- 城市搜索 -->
        <div class="search-section">
          <el-row :gutter="20" justify="center">
            <el-col :xs="24" :sm="18" :md="16" :lg="12">
              <el-card class="search-card">
                <div class="search-form">
                  <el-form :inline="true" @submit.prevent="handleSearch">
                    <el-form-item class="city-input">
                      <el-input 
                        v-model="searchForm.city" 
                        placeholder="请输入城市" 
                        clearable
                      />
                    </el-form-item>
                    <el-form-item class="province-input">
                      <el-input 
                        v-model="searchForm.province" 
                        placeholder="请输入省份" 
                        clearable
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button 
                        type="primary" 
                        @click="handleSearch" 
                        :loading="weatherStore.loading"
                      >
                        查询
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
                
                <!-- 搜索历史 -->
                <div v-if="weatherStore.searchHistory.length > 0" class="search-history">
                  <div class="history-header">
                    <h3>最近搜索</h3>
                    <el-button 
                      type="text" 
                      @click="weatherStore.clearSearchHistory"
                    >
                      清空
                    </el-button>
                  </div>
                  <div class="history-tags">
                    <el-tag
                      v-for="(item, index) in weatherStore.searchHistory"
                      :key="index"
                      size="small"
                      class="history-tag"
                      @click="selectHistoryItem(item)"
                    >
                      {{ item.city }} {{ item.province }}
                    </el-tag>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <!-- 当前天气 -->
        <div v-if="weatherStore.currentWeather" class="weather-section">
          <el-row :gutter="20" justify="center">
            <el-col :xs="24" :sm="18" :md="16" :lg="12">
              <el-card class="weather-card">
                <div class="weather-header">
                  <div class="location">
                    <h2>{{ weatherStore.currentWeather.weather.city }}</h2>
                    <p>{{ weatherStore.currentWeather.weather.province }}</p>
                  </div>
                  
                  <div v-if="userStore.isAuthenticated" class="favorite-btn">
                    <el-button 
                      v-if="isFavorite" 
                      type="danger" 
                      size="small" 
                      @click="removeFavorite"
                      :loading="userStore.loading"
                    >
                      <i class="el-icon-star-on"></i> 已收藏
                    </el-button>
                    <el-button 
                      v-else 
                      type="primary" 
                      size="small" 
                      @click="addFavorite"
                      :loading="userStore.loading"
                    >
                      <i class="el-icon-star-off"></i> 收藏
                    </el-button>
                  </div>
                </div>
                
                <div class="weather-content">
                  <div class="weather-condition">
                    <div class="weather-icon">
                      <!-- 使用和风天气图标 -->
                      <i v-if="weatherStore.currentWeather.weather.icon" 
                         :class="`qi-${weatherStore.currentWeather.weather.icon} qi-64`"></i>
                      <i v-else 
                         :class="getWeatherIcon(weatherStore.currentWeather.weather.weatherCondition) + ' qi-64'"></i>
                    </div>
                    <div class="weather-text">
                      {{ weatherStore.currentWeather.weather.text || weatherStore.currentWeather.weather.weatherCondition }}
                    </div>
                  </div>
                  
                  <div class="temperature-box">
                    <div class="temperature">
                      {{ weatherStore.currentWeather.weather.temperature }}°C
                    </div>
                    <div class="feels-like" v-if="weatherStore.currentWeather.weather.temperatureFeelsLike">
                      体感: {{ weatherStore.currentWeather.weather.temperatureFeelsLike }}°C
                    </div>
                    <div class="temperature-range">
                      <span>{{ weatherStore.currentWeather.weather.temperatureLow }}°C ~ {{ weatherStore.currentWeather.weather.temperatureHigh }}°C</span>
                    </div>
                  </div>
                </div>
                
                <div class="weather-details">
                  <div class="detail-item">
                    <div class="detail-label">湿度</div>
                    <div class="detail-value">{{ weatherStore.currentWeather.weather.humidity }}%</div>
                  </div>
                  <div class="detail-item">
                    <div class="detail-label">风速</div>
                    <div class="detail-value">{{ weatherStore.currentWeather.weather.windSpeed }} km/h</div>
                  </div>
                  <div class="detail-item">
                    <div class="detail-label">风向</div>
                    <div class="detail-value">{{ weatherStore.currentWeather.weather.windDirection }}</div>
                  </div>
                  <div class="detail-item" v-if="weatherStore.currentWeather.weather.vis">
                    <div class="detail-label">能见度</div>
                    <div class="detail-value">{{ weatherStore.currentWeather.weather.vis }} km</div>
                  </div>
                  <div class="detail-item" v-if="weatherStore.currentWeather.weather.aqi">
                    <div class="detail-label">空气质量</div>
                    <div class="detail-value">{{ weatherStore.currentWeather.weather.airQualityLevel }}</div>
                  </div>
                </div>
                
                <div class="data-source">
                  <p>数据来源: {{ weatherStore.currentWeather.source }}</p>
                  <p>更新时间: {{ formatTime(weatherStore.currentWeather.weather.updateTime) }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <!-- 天气预报 -->
        <div v-if="weatherStore.currentWeather && weatherStore.currentWeather.weather.forecasts" class="forecast-section">
          <el-row :gutter="20" justify="center">
            <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
              <el-card class="forecast-card">
                <template #header>
                  <div class="forecast-header">
                    <h3>未来天气预报</h3>
                    <el-button 
                      v-if="weatherStore.currentWeather" 
                      type="primary" 
                      size="small" 
                      @click="navigateToForecastDetail"
                    >
                      详细图表
                    </el-button>
                  </div>
                </template>
                
                <div class="forecast-container">
                  <div 
                    v-for="(forecast, index) in weatherStore.currentWeather.weather.forecasts" 
                    :key="index"
                    class="forecast-item"
                  >
                    <div class="forecast-date">
                      {{ formatDate(forecast.date) }}
                    </div>
                    <div class="forecast-sun-times">
                      <span v-if="forecast.sunrise">日出: {{ forecast.sunrise }}</span>
                      <span v-if="forecast.sunset">日落: {{ forecast.sunset }}</span>
                    </div>
                    <div class="forecast-weather-container">
                      <div class="forecast-weather">
                        <div class="weather-day">
                          <!-- 使用和风天气图标，优先使用iconDay字段 -->
                          <i v-if="forecast.iconDay" 
                             :class="`qi-${forecast.iconDay} qi-32`"></i>
                          <i v-else 
                             :class="getWeatherIcon(forecast.weatherCondition, false) + ' qi-32'"></i>
                          <span>{{ forecast.textDay || forecast.weatherCondition }}</span>
                        </div>
                        <div class="weather-night">
                          <!-- 使用和风天气图标，优先使用iconNight字段 -->
                          <i v-if="forecast.iconNight" 
                             :class="`qi-${forecast.iconNight} qi-32`"></i>
                          <i v-else 
                             :class="getWeatherIcon(forecast.weatherConditionNight || forecast.weatherCondition, true) + ' qi-32'"></i>
                          <span>{{ forecast.textNight || forecast.weatherConditionNight || forecast.weatherCondition }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="forecast-temp">
                      {{ forecast.temperatureLow }}°C ~ {{ forecast.temperatureHigh }}°C
                    </div>
                    <div class="forecast-wind">
                      <div>白天: {{ forecast.windDirDay || forecast.windDirection }} {{ forecast.windSpeedDay || forecast.windSpeed }}km/h</div>
                      <div>夜间: {{ forecast.windDirNight || forecast.windDirectionNight }} {{ forecast.windSpeedNight }}km/h</div>
                    </div>
                    <div class="forecast-details">
                      <div class="detail-item">
                        <span class="detail-label">湿度:</span>
                        <span class="detail-value">{{ forecast.humidity }}%</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">降水量:</span>
                        <span class="detail-value">{{ forecast.precipitation }}mm</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">紫外线:</span>
                        <span class="detail-value">{{ forecast.uvIndex }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <!-- 热门城市 -->
        <div class="popular-cities-section">
          <el-row :gutter="20" justify="center">
            <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
              <el-card v-if="!weatherStore.loading">
                <template #header>
                  <div class="popular-header">
                    <h3>热门城市</h3>
                    <el-button type="text" @click="fetchPopularCities">刷新</el-button>
                  </div>
                </template>
                
                <div v-if="weatherStore.popularCities && weatherStore.popularCities.length > 0" class="popular-cities-grid">
                  <el-card 
                    v-for="(city, index) in weatherStore.popularCities" 
                    :key="index"
                    class="city-card"
                    shadow="hover"
                    @click="selectCity(city.city, city.province)"
                  >
                    <div class="city-name">{{ city.city }}</div>
                    <div class="city-province" v-if="city.province">{{ city.province }}</div>
                    <div class="city-weather">
                      <i v-if="city.icon" :class="`qi-${city.icon} qi-48`"></i>
                      <i v-else :class="getWeatherIcon(city.weatherCondition) + ' qi-48'"></i>
                      <span>{{ city.text || city.weatherCondition }}</span>
                    </div>
                    <div class="city-temp" v-if="city.temperature">{{ city.temperature }}°C</div>
                  </el-card>
                </div>
                <div v-else class="no-data">
                  <p>暂无热门城市数据</p>
                  <el-button type="primary" @click="fetchPopularCities">获取热门城市</el-button>
                </div>
              </el-card>
              
              <div v-else class="loading-placeholder">
                <el-skeleton :rows="3" animated />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2023 天气预报应用 | 数据来源：和风天气</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../store/user'
import { useWeatherStore } from '../store/weather'

// 路由
const router = useRouter()

// 状态管理
const userStore = useUserStore()
const weatherStore = useWeatherStore()

// 搜索表单
const searchForm = reactive({
  city: '',
  province: ''
})

// 判断当前城市是否已收藏
const isFavorite = computed(() => {
  if (!userStore.isAuthenticated || !userStore.favorites || !weatherStore.currentWeather) {
    return false
  }
  
  return userStore.favorites.some(
    f => f.city === weatherStore.currentWeather.weather.city && 
         f.province === weatherStore.currentWeather.weather.province
  )
})

// 初始化数据
onMounted(async () => {
  // 初始化用户状态
  userStore.initUser()
  
  // 加载搜索历史
  weatherStore.loadSearchHistory()
  
  // 获取热门城市天气
  fetchPopularCities()
  
  // 只有在用户已登录状态下才尝试获取收藏城市列表
  if (userStore.isAuthenticated) {
    try {
      await userStore.fetchFavorites()
    } catch (error) {
      // 不要显示错误，因为这不是主要功能，只在控制台记录
      console.error('获取收藏城市失败:', error)
    }
  }
  
  // 如果有搜索历史，默认加载最近一次搜索的城市
  if (weatherStore.searchHistory.length > 0) {
    const lastSearch = weatherStore.searchHistory[0]
    await getCityWeather(lastSearch.city, lastSearch.province)
  } else {
    // 否则加载默认城市（北京）
    await getCityWeather('北京', '北京')
  }
})

// 获取城市天气
const getCityWeather = async (city, province) => {
  if (!city || !province) {
    ElMessage.warning('请输入城市和省份')
    return
  }
  
  try {
    await weatherStore.getCityWeather(city, province)
  } catch (error) {
    ElMessage.error('获取天气信息失败')
  }
}

// 处理搜索
const handleSearch = async () => {
  await getCityWeather(searchForm.city, searchForm.province)
}

// 选择历史记录
const selectHistoryItem = (item) => {
  searchForm.city = item.city
  searchForm.province = item.province
  getCityWeather(item.city, item.province)
}

// 选择热门城市
const selectCity = (city, province) => {
  searchForm.city = city
  searchForm.province = province
  getCityWeather(city, province)
}

// 获取热门城市
const fetchPopularCities = async () => {
  try {
    await weatherStore.getPopularCityWeather({
      range: 'cn',
      number: 10
    });
  } catch (error) {
    ElMessage.error('获取热门城市天气失败');
  }
};

// 添加收藏
const addFavorite = async () => {
  if (!userStore.isAuthenticated) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  const { city, province } = weatherStore.currentWeather.weather
  
  try {
    await userStore.addFavorite(city, province)
    ElMessage.success('收藏成功')
  } catch (error) {
    ElMessage.error('收藏失败')
  }
}

// 移除收藏
const removeFavorite = async () => {
  if (!userStore.isAuthenticated) return
  
  const { city, province } = weatherStore.currentWeather.weather
  
  try {
    await userStore.removeFavorite(city, province)
    ElMessage.success('已取消收藏')
  } catch (error) {
    ElMessage.error('取消收藏失败')
  }
}

// 用户菜单命令处理
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'favorites':
      router.push('/favorites')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 处理登出
const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('已退出登录')
  } catch (error) {
    ElMessage.error('退出登录失败')
  }
}

// 根据天气状况获取图标
const getWeatherIcon = (condition, isNight = false) => {
  // 根据天气状况映射到和风天气图标代码
  const iconMap = {
    '晴': isNight ? 'qi-150' : 'qi-100',
    '多云': isNight ? 'qi-151' : 'qi-101',
    '少云': isNight ? 'qi-152' : 'qi-102',
    '晴间多云': isNight ? 'qi-153' : 'qi-103',
    '阴': 'qi-104',
    '阵雨': isNight ? 'qi-350' : 'qi-300',
    '强阵雨': isNight ? 'qi-351' : 'qi-301',
    '雷阵雨': 'qi-302',
    '强雷阵雨': 'qi-303',
    '雷阵雨伴有冰雹': 'qi-304',
    '小雨': 'qi-305',
    '中雨': 'qi-306',
    '大雨': 'qi-307',
    '极端降雨': 'qi-308',
    '毛毛雨': 'qi-309',
    '暴雨': 'qi-310',
    '大暴雨': 'qi-311',
    '特大暴雨': 'qi-312',
    '冻雨': 'qi-313',
    '小到中雨': 'qi-314',
    '中到大雨': 'qi-315',
    '大到暴雨': 'qi-316',
    '暴雨到大暴雨': 'qi-317',
    '大暴雨到特大暴雨': 'qi-318',
    '雨': 'qi-399',
    '小雪': 'qi-400',
    '中雪': 'qi-401',
    '大雪': 'qi-402',
    '暴雪': 'qi-403',
    '雨夹雪': 'qi-404',
    '雨雪天气': 'qi-405',
    '阵雨夹雪': isNight ? 'qi-456' : 'qi-406',
    '阵雪': isNight ? 'qi-457' : 'qi-407',
    '小到中雪': 'qi-408',
    '中到大雪': 'qi-409',
    '大到暴雪': 'qi-410',
    '雪': 'qi-499',
    '薄雾': 'qi-500',
    '雾': 'qi-501',
    '霾': 'qi-502',
    '扬沙': 'qi-503',
    '浮尘': 'qi-504',
    '沙尘暴': 'qi-507',
    '强沙尘暴': 'qi-508',
    '热': 'qi-900',
    '冷': 'qi-901',
    '未知': 'qi-999'
  }
  
  // 如果传入的是图标代码，直接使用
  if (condition && condition.startsWith('qi-')) {
    return condition
  }
  
  // 如果有传入icon属性，直接使用
  if (condition && condition.icon) {
    return `qi-${condition.icon}`
  }
  
  return iconMap[condition] || 'qi-999'
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '未知'
  
  try {
    const date = new Date(timeStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (error) {
    return timeStr
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未知'
  
  try {
    const date = new Date(dateStr)
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const weekday = weekdays[date.getDay()]
    
    return `${date.getMonth() + 1}月${date.getDate()}日 ${weekday}`
  } catch (error) {
    return dateStr
  }
}

// 在script setup部分添加导航方法
function navigateToForecastDetail() {
  if (!weatherStore.currentWeather) return;
  
  const city = weatherStore.currentWeather.weather.city;
  const province = weatherStore.currentWeather.weather.province;
  
  router.push({
    name: 'ForecastDetail',
    params: { city, province }
  });
}
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  background-color: #409eff;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-profile {
  color: white;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-profile:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主要内容 */
.main-content {
  flex: 1;
  padding-top: 70px;
  padding-bottom: 20px;
  background-color: #f5f7fa;
}

/* 搜索部分 */
.search-section {
  margin-bottom: 20px;
}

.search-card {
  border-radius: 8px;
}

.search-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 768px) {
  .city-input, .province-input {
    width: 100%;
    margin-right: 0;
  }
}

.search-history {
  margin-top: 15px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.history-header h3 {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-tag {
  cursor: pointer;
}

/* 天气展示部分 */
.weather-section {
  margin-bottom: 20px;
}

.weather-card {
  border-radius: 8px;
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.location h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.location p {
  margin: 5px 0 0;
  color: #909399;
  font-size: 14px;
}

.weather-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.weather-condition {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weather-icon i {
  font-size: 50px;
  color: #409eff;
}

.weather-text {
  margin-top: 10px;
  font-size: 16px;
}

.temperature-box {
  text-align: right;
}

.temperature {
  font-size: 40px;
  font-weight: 600;
}

.feels-like {
  color: #909399;
  font-size: 14px;
  margin-top: 5px;
}

.temperature-range {
  color: #909399;
  font-size: 14px;
}

.weather-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
  justify-content: space-around;
}

.detail-item {
  text-align: center;
}

.detail-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 16px;
  font-weight: 500;
}

.data-source {
  font-size: 12px;
  color: #909399;
  text-align: right;
}

.data-source p {
  margin: 2px 0;
}

/* 天气预报部分 */
.forecast-section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.forecast-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forecast-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.forecast-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px 0;
  margin: 0 -10px;
  scrollbar-width: thin;
}

.forecast-container::-webkit-scrollbar {
  height: 6px;
}

.forecast-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.forecast-item {
  flex: 0 0 auto;
  width: 220px;
  padding: 15px;
  margin: 0 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.forecast-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.forecast-date {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.forecast-sun-times {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #606266;
  margin-bottom: 12px;
}

.forecast-weather-container {
  margin-bottom: 15px;
}

.forecast-weather {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.weather-day, .weather-night {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
}

.weather-day {
  background-color: rgba(255, 235, 205, 0.3);
  border-radius: 6px;
}

.weather-night {
  background-color: rgba(176, 196, 222, 0.3);
  border-radius: 6px;
}

.forecast-weather i {
  font-size: 30px;
  margin-bottom: 5px;
}

.forecast-temp {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  color: #409eff;
}

.forecast-wind {
  font-size: 14px;
  color: #606266;
  margin-bottom: 15px;
  text-align: center;
}

.forecast-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
  justify-content: space-around;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 30%;
}

.detail-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 3px;
}

.detail-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

/* 热门城市部分 */
.popular-cities-section {
  margin-bottom: 20px;
}

.popular-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popular-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.popular-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.city-card {
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s;
}

.city-card:hover {
  transform: translateY(-5px);
}

.city-name {
  font-weight: 600;
  margin-bottom: 10px;
}

.city-province {
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.city-weather {
  margin-bottom: 10px;
}

.city-weather i {
  font-size: 30px;
  color: #409eff;
  display: block;
  margin-bottom: 5px;
}

.city-temp {
  font-size: 20px;
  font-weight: 500;
}

.no-data {
  text-align: center;
  padding: 20px 0;
}

.loading-placeholder {
  padding: 20px;
}

/* 页脚 */
.footer {
  background-color: #303133;
  color: #909399;
  padding: 20px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
}
</style> 